<template>
  <div class="content">

    <el-form :inline="true" :model="queryParam">
      <el-form-item label="编号">
        <el-input v-model="queryParam.num" placeholder="请输入编号" clearable />
      </el-form-item>
      <el-form-item label="店铺名称">
        <el-input v-model="queryParam.storeName" placeholder="请输入店铺名称" clearable />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="loadEvaluateList">查询</el-button>
      </el-form-item>
    </el-form>


    <el-table :data="evaluateListList">

      <el-table-column label="评价编号">
        <template #default="scope">
          {{ scope.row.orderNo }}
        </template>
      </el-table-column>
      <el-table-column label="店铺名称">
        <template #default="scope">
          {{ scope.row.storeName }}
        </template>
      </el-table-column>
      <el-table-column label="顾客名称">
        <template #default="scope">
          {{ scope.row.customerName }}
        </template>
      </el-table-column>
      <el-table-column label="评价内容">
        <template #default="scope">
          {{ scope.row.content }}
        </template>
      </el-table-column>
      <el-table-column label="评价时间">
        <template #default="scope">
          {{ scope.row.evaluateTime }}
        </template>
      </el-table-column>


      <el-table-column label="操作" width="300px">
        <template #default="scope">
          <el-button size="small" @click="handleOpenCategoryDialog(scope.row.orderNo)">详情</el-button>

          <el-button size="small" v-if="scope.row.response == '' || scope.row.response == null" type="danger"
            style="margin-left: 2px;" disabled @click="handleEdit(scope.row)">未回复</el-button>

          <el-button size="small" v-if="scope.row.response != '' && scope.row.response != null"
            style="margin-left: 2px;" disabled @click="handleEdit(scope.row)">已回复</el-button>

          <el-button size="small" style="margin-left: 2px;" type="danger"
            @click="handleDelete(scope.row.orderNo)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>



    <!--用户对话框-->
    <el-dialog v-model="dialogFormVisible" title="评价详情">
      <el-form :data="detailInfo">
        <el-form-item label="顾客名称" prop="customerName">
          <span>张三</span>
        </el-form-item>
        <el-form-item label="评价内容" prop="content">
          <span>很好吃，下一次还来买</span>
        </el-form-item>

        <el-form-item label="评价图片">
          <div class="demo-image__preview">
            <el-image 
              style="width: 100px; height: 100px"
              :src="defaultImg" 
              :preview-src-list="detailImage">
            </el-image>
          </div>
        </el-form-item>

        <el-form-item label="您的回复">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="responseText">
          </el-input>
        </el-form-item>

      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">关&nbsp;&nbsp;闭</el-button>
          <el-button type="primary" @click="handleSave">提&nbsp;&nbsp;交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>

</template>

<script setup>

import { reactive, ref} from "vue";
import {getEvaluateList,getEvaluateDetail,saveResponse,getDelete} from  "@/api/feedback"
import {ElMessageBox,ElMessage} from "element-plus";


let dialogFormVisible=ref(false); 

let evaluateListList = reactive([]);
let queryParam = ref({
          userId: "",
          num: "",
          storeName: ""
        });

let detailInfo = reactive([])
let responseText = ref("")

let defaultImg ='https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg';  //默认评论图片
let detailImage = reactive([
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg', //多个评论图片
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        ]) 
const saveForm = reactive({orderNo:"11",responseText:""});



let handleDelete=(orderNo)=>{
  console.log("handleDelete")

  getDelete(orderNo).then((resp) => {
    if (resp.code == 200) {

    }
  })
}


let handleClose=(tag)=>{
  console.log("handleClose")
  // detailImage.splice(detailImage.indexOf(tag), 1);
}

//打开添加、编辑分类对话框
let handleOpenCategoryDialog=(orderNo)=>{
  dialogFormVisible.value=true;
  console.log(orderNo)

  getEvaluateDetail(orderNo).then((resp) => {
    if (resp.code == 200) {
      detailInfo.push(... resp.data);
      //TODO 设置图片信息

    }
  })

}


let loadEvaluateList=()=> {
    let userStr = sessionStorage.getItem("userInfo");
    let user = JSON.parse(userStr);
    queryParam.userId = user.id;

    if(evaluateListList.length != 0){
      evaluateListList = []
    }
    getEvaluateList(queryParam).then((resp) => {
      console.log(resp.data)
      if (resp.code == 200) {
        
        evaluateListList.push(... resp.data);
      }
    })
}

let handleSave=()=> {
  dialogFormVisible.value=false;
  saveForm.orderNo = 11;
  saveForm.responseText = responseText.value;

  saveResponse(saveForm).then((resp) => {
      // console.log(resp.data)
      if (resp.code == 200) {

      }
  })

}


loadEvaluateList();
</script>

<style scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
  }


</style>
